<template>
  <div>
    <el-card>
      <el-row  style="flex-wrap: wrap;" :gutter="10">
        <el-col :span="7" style="text-align: left;">
          <el-date-picker v-model="pushOrderListReqForm.queryTime" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-col>
        <el-col :span="3" style="text-align: right;">
          <el-input v-model="pushOrderListReqForm.pushOrderCode"  placeholder="请输入入库编号">
          </el-input>
        </el-col>
        <el-col :span="3" style="text-align: left;">
          <el-input v-model="pushOrderListReqForm.batchNumber"  placeholder="请输入批次编号">
          </el-input>
        </el-col>
        <el-col :span="3" style="text-align: left;">
          <el-input v-model="pushOrderListReqForm.pushOrderOwn"  placeholder="请输入创建人">
          </el-input>
        </el-col>
        <el-col :span="3" style="text-align: left;">
          <el-input v-model="pushOrderListReqForm.pushOrderStatus"  placeholder="请输入状态">
          </el-input>
        </el-col>
        <el-col :span="3" style="text-align: left;">
          <el-button class="searchbtn" @click="searchPushOrderList" type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px;">
        <el-col :span="24" style="text-align: right;">
          <el-button type="primary" size="mini" @click="addPushOrderBtnClick">添加入库单</el-button>
        </el-col>
      </el-row>
      <el-table :data="pushOrderList" border>
        <el-table-column label="No" type="index"></el-table-column>
        <el-table-column label="入库单编号" prop="pushOrderCode" min-width="200"></el-table-column>
        <el-table-column label="批次号" prop="batchNumber" min-width="200"></el-table-column>
        <el-table-column label="创建人" prop="pushOrderOwn" min-width="200"></el-table-column>
        <el-table-column label="创建时间" prop="pushOrderCreatime" min-width="200" :formatter="this.$utils.dataFormat"></el-table-column>
        <el-table-column label="入库单状态" prop="pushOrderStatus" min-width="200"></el-table-column>
        <el-table-column label="操作" width="230" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="openDraw(scope.row)">详情</el-button>
            <el-button type="primary" size="mini" @click="pushOrderEditBtnClick(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="pushOrderDeleteBtnClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pushOrderListReqForm.pageNum"
        :page-sizes="[10, 20, 30, 40]" :page-size="pushOrderListReqForm.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <el-drawer title="添加入库详情" :visible.sync="tableDraw" direction="rtl" size="80%" :wrapperClosable="false">
        <el-row :gutter="20">
          <el-col :span="18">
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="grid-content bg-purple">入库单编号:<span>{{detailsData.pushOrderCode}}</span></div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">创建人:<span>{{detailsData.pushOrderOwn}}</span></div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="grid-content bg-purple">创建时间:<span>{{detailsData.pushOrderCreatime}}</span></div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">入库状态:<span>{{detailsData.pushOrderStatus}}</span></div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <div id="outQrc" class="qrcode" style="margin-top: -60px;"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2" style="text-align: right; padding: 0; font-weight: inherit;">
            <el-button type="primary" size="mini" @click="addPushOrderDetailsClick">添加入库物料</el-button>
          </el-col>
        </el-row>
        <el-table :data="pushOrderDetailList" border>
          <el-table-column label="No" type="index"></el-table-column>
          <el-table-column label="物料详情编号" prop="pushOrderDetailCode" min-width="180"></el-table-column>
          <el-table-column label="物料编号" prop="productCode" min-width="180"></el-table-column>
          <el-table-column label="物料名称" prop="productName" min-width="180"></el-table-column>
          <el-table-column label="数量" prop="pushOrderCount" min-width="180"></el-table-column>
          <el-table-column label="完成数量" prop="finishCount" min-width="180"></el-table-column>
          <el-table-column label="操作" width="230" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="qrCodeClick(scope.row)">二维码</el-button>
              <el-button type="primary" size="mini" @click="pushOrderEditBtnDetailsClick(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="pushOrderDeleteDetailsBtnClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--        <el-pagination :current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total">
        </el-pagination> -->
        <el-drawer title="物料详情二维码" :append-to-body="true" :before-close="qrCodeDialogClosed" :visible.sync="qrCodeDialog"
          :wrapperClosable="false" size="50%">
          <span style="text-align: center">
            <el-card class="box-card" id="printTest" style="display: flex;    justify-content: center;">
              <div id='qrcode' class='qrcode'></div>
              <div style="display: inline-block;float: right;    padding: 0 20px;">
                <div class="text item">
                  {{'物料名称: ' + qrCodeForm.productName }}
                </div>
                <div class="text item">
                  {{'物料编号: ' + qrCodeForm.productCode }}
                </div>
                <div class="text item">
                  {{'物料数量: ' + qrCodeForm.pushOrderCount }}
                </div>
              </div>
            </el-card>
            <div style="margin-top: 10px;">
              <el-button type="primary" v-print="'#printTest'">打印二维码</el-button>
            </div>
          </span>
        </el-drawer>

        <el-drawer title="添加入库物料" :append-to-body="true" :before-close="addPushOrderDetailsDialogClosed" :visible.sync="addPushOrderDetailsDialog"
          :wrapperClosable="false" size="50%">
          <!-- //添加物料 -->
          <span style="text-align: center">
            <el-form ref="addPushOrderDetailsFormRef" :model="addPushOrderDetailsForm" :rules="addPushOrderDetailsFormRules"
              label-position="right" label-width="100px">
              <el-form-item label="物料名称" prop="productName" v-on:keyup.enter.native="addDetails">
                <el-select v-model="addPushOrderDetailsForm.productName" @change="selectGet" filterable placeholder="请选择物料">
                  <el-option v-for="item in productList" :key="item.productCode" :label="item.productName" :value="item.productCode">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数量" prop="pushOrderCount" v-on:keyup.enter.native="addDetails">
                <el-input v-model="addPushOrderDetailsForm.pushOrderCount"></el-input>
              </el-form-item>
            </el-form>
            <div>
              <el-button type="primary" @click="addDetails">提交</el-button>
            </div>
          </span>
        </el-drawer>
        <!-- //编辑物料 -->
        <el-drawer title="编辑入库物料" :append-to-body="true" :before-close="editPushOrderDetailsDialogClosed" :visible.sync="editPushOrderDetailsDialog"
          :wrapperClosable="false" size="50%">
          <span style="text-align: center">
            <el-form ref="editPushOrderDetailsFormRef" :model="editPushOrderDetailsForm" :rules="addPushOrderDetailsFormRules"
              label-position="right" label-width="100px">
              <el-form-item label="物料名称" prop="productName" v-on:keyup.enter.native="eidtDetails">
                <el-select v-model="editPushOrderDetailsForm.productName" @change="selectGet" filterable placeholder="请选择物料">
                  <el-option v-for="item in productList" :key="item.productCode" :label="item.productName" :value="item.productCode">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数量" prop="pushOrderCount" v-on:keyup.enter.native="eidtDetails">
                <el-input v-model="editPushOrderDetailsForm.pushOrderCount"></el-input>
              </el-form-item>
            </el-form>
            <div>
              <el-button type="primary" @click="eidtDetails">提交</el-button>
            </div>
          </span>
        </el-drawer>

      </el-drawer>

      <el-dialog v-dialogDrag title="添加入库单" :visible.sync="addPushOrderDialog" width="40%" center @closed="addPushOrderDialogClosed"
        :close-on-click-modal="false">
        <span style="text-align: center">
          <el-form ref="addPushOrderFormRef" :model="addPushOrderForm" :rules="addPushOrderFormRules" label-position="right"
            label-width="100px">
            <el-form-item label="批次号" prop="batchNumber" v-on:keyup.enter.native="addPushOrder">
              <el-input v-model="addPushOrderForm.batchNumber"></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="pushOrderOwn" v-on:keyup.enter.native="addPushOrder">
              <el-input v-model="addPushOrderForm.pushOrderOwn"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" prop="pushOrderCreatime" v-on:keyup.enter.native="addPushOrder">
              <!-- <el-input v-model="addPushOrderForm.pushOrderCreatime"></el-input> -->
              <el-date-picker v-model="addPushOrderForm.pushOrderCreatime" type="datetime" placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
            <!--            <el-form-item label="入库单状态" prop="pushOrderStatus" v-on:keyup.enter.native="addPushOrder">
              <el-input v-model="addPushOrderForm.pushOrderStatus"></el-input>
            </el-form-item> -->
          </el-form>
          <div>
            <el-button type="primary" @click="addPushOrder">提交</el-button>
          </div>
        </span>
      </el-dialog>
      <el-dialog v-dialogDrag title="编辑入库单" :visible.sync="editPushOrderDialog" width="40%" center @closed="editPushOrderDialogClosed"
        :close-on-click-modal="false">
        <span style="text-align: center">
          <el-form ref="editPushOrderFormRef" :model="editPushOrderForm" :rules="addPushOrderFormRules" label-position="right"
            label-width="100px">
            <el-form-item label="批次号" prop="batchNumber" v-on:keyup.enter.native="editPushOrder">
              <el-input v-model="editPushOrderForm.batchNumber"></el-input>
            </el-form-item>
            <el-form-item label="创建人" prop="pushOrderOwn" v-on:keyup.enter.native="editPushOrder">
              <el-input v-model="editPushOrderForm.pushOrderOwn"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" prop="pushOrderCreatime" v-on:keyup.enter.native="editPushOrder">
              <!-- <el-input v-model="editPushOrderForm.pushOrderCreatime"></el-input> -->
              <el-date-picker v-model="editPushOrderForm.pushOrderCreatime" type="datetime" @change="changeStatus"
                placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
            <!--            <el-form-item label="入库单状态" prop="pushOrderStatus" v-on:keyup.enter.native="editPushOrder">
              <el-input v-model="editPushOrderForm.pushOrderStatus"></el-input>
            </el-form-item> -->
          </el-form>
          <div>
            <el-button type="primary" @click="editPushOrder">提交</el-button>
          </div>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  export default {
    name: 'WarehouseIn',
    data() {
      return {
        pushOrderList: [],
        pushOrderDetailList: [],
        total: 0,
        addPushOrderDialog: false,
        editPushOrderDialog: false,
        addPushOrderDetailsDialog: false,
        editPushOrderDetailsDialog: false,
        qrCodeDialog: false,
        pushOrderListReqForm: {
          pageNum: 1,
          pageSize: 10,
          pushOrderCode: '',
          pushOrderStatus: '',
          batchNumber: '',
          pushOrderOwn: '',
          queryTime: []
        },
        pushOrderDetailsListReqForm: {
          pageNum: 1,
          pageSize: 10
        },
        addPushOrderDetailsForm: {
          pushOrderCode: '',
          productCode: '',
          productName: '',
          pushOrderCount: ''
        },
        editPushOrderDetailsForm: {
          pushOrderDetailId: '',
          pushOrderDetailCode: '',
          pushOrderCode: '',
          productCode: '',
          productName: '',
          pushOrderCount: ''
        },
        qrCodeForm: {
          pushOrderDetailId: '',
          pushOrderCode: '',
          productCode: '',
          productName: '',
          pushOrderCount: ''
        },
        addPushOrderForm: {
          pushOrderCreatime: '',
          batchNumber: '',
          pushOrderOwn: '',
          pushOrderStatus: ''
        },
        editPushOrderForm: {
          pushOrderId: '',
          pushOrderCreatime: '',
          batchNumber: '',
          pushOrderOwn: '',
          pushOrderStatus: ''
        },
        addPushOrderFormRules: {
          batchNumber: [{
            required: true,
            message: '请输入批次号',
            trigger: 'blur'
          }],
          pushOrderOwn: [{
            required: true,
            message: '请输入创建人',
            trigger: 'blur'
          }],
          pushOrderCreatime: [{
            required: true,
            message: '请输入时间',
            trigger: 'blur'
          }]
        },
        editPushOrderFormRules: {},
        tableDraw: false,
        tableDrawData: [],
        detailsData: {
          pushOrderCode: '',
          pushOrderCreatime: '',
          pushOrderOwn: ',',
          pushOrderStatus: ''
        },
        productListReqForm: {
          pageNum: 1,
          pageSize: 100000
        },
        productList: [],
        sobj: {},
        addPushOrderDetailsFormRules: {
          productCode: [{
            required: true,
            message: '请输入物料编号',
            trigger: 'blur'
          }],
          productName: [{
            required: true,
            message: '请输入物料名称',
            trigger: 'blur'
          }],
          pushOrderCount: [{
            required: true,
            message: '请输入数量',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      async searchPushOrderList() {
        this.getPushOrderList()
      },
      async getPushOrderList() {
        const res = await this.$apiUtil.postByJson('pushOrder/getPushOrderList', this.pushOrderListReqForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.pushOrderList = res.data.pushOrderVOS
        this.total = res.data.totalSize
        // console.log(this.detailsData.pushOrderId)
        if (this.detailsData.pushOrderId) {
          this.getPushOrderDetailList()
        }
      },
      async getProductList() {
        const res = await this.$apiUtil.postByJson('product/getProductList', this.productListReqForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.productList = res.data.productVOS
      },
      handleSizeChange(newSize) {
        this.pushOrderListReqForm.pageSize = newSize
        this.getPushOrderList()
      },
      handleCurrentChange(newPage) {
        this.pushOrderListReqForm.pageNum = newPage
        this.getPushOrderList()
      },
      addPushOrderBtnClick() {
        this.addPushOrderDialog = true
        this.addPushOrderForm.pushOrderCreatime = this.$utils.dataFormatNow()
      },
      addPushOrderDetailsClick() {
        this.addPushOrderDetailsDialog = true
      },
      addPushOrderDetailsDialogClosed() {
        this.addPushOrderDetailsDialog = false
      },
      editPushOrderDetailsDialogClosed() {
        this.editPushOrderDetailsDialog = false
      },
      qrCodeDialogClosed() {
        this.qrCodeDialog = false
      },
      async addPushOrder() {
        const res = await this.$apiUtil.postByJson('pushOrder/addPushOrder', this.addPushOrderForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.$message.success('添加入库单成功！')
        this.addPushOrderDialog = false
        this.getPushOrderList()
      },
      pushOrderEditBtnClick(row) {
        console.log(row)
        this.editPushOrderDialog = true
        this.editPushOrderForm.pushOrderId = row.pushOrderId
        this.editPushOrderForm.pushOrderCode = row.pushOrderCode
        this.editPushOrderForm.batchNumber = row.batchNumber
        this.editPushOrderForm.pushOrderCreatime = row.pushOrderCreatime
        this.editPushOrderForm.pushOrderOwn = row.pushOrderOwn
        this.editPushOrderForm.pushOrderStatus = row.pushOrderStatus
      },
      // 物料编辑
      pushOrderEditBtnDetailsClick(row) {
        // console.log(row)
        this.editPushOrderDetailsDialog = true
        this.editPushOrderDetailsForm.pushOrderDetailId = row.pushOrderDetailId
        this.editPushOrderDetailsForm.pushOrderDetailCode = row.pushOrderDetailCode
        this.editPushOrderDetailsForm.pushOrderCode = row.pushOrderCode
        this.editPushOrderDetailsForm.productCode = row.productCode
        this.editPushOrderDetailsForm.productName = row.productName
        this.editPushOrderDetailsForm.pushOrderCount = row.pushOrderCount
      },
      // 物料编辑
      qrCodeClick(row) {
        // console.log(row)
        this.qrCodeDialog = true
        this.qrCodeForm.pushOrderDetailId = row.pushOrderDetailId
        this.qrCodeForm.pushOrderCode = row.pushOrderCode
        this.qrCodeForm.productCode = row.productCode
        this.qrCodeForm.productName = row.productName
        this.qrCodeForm.pushOrderCount = row.pushOrderCount
        /* eslint-disable no-new */
        this.$nextTick(function() {
          document.getElementById('qrcode').innerHTML = ''
          const qrcode = new QRCode('qrcode', { // eslint-disable-line no-unused-vars
            width: 200,
            height: 200,
            text: 'product_' + row.productCode,
            colorDark: '#000000',
            colorLight: '#ffffff'
          })
        })
      },
      async pushOrderDeleteBtnClick(row) {
        this.$alert('确定删除入库单: ' + row.pushOrderCodes + ' ?', '提示', {
          confirmButtonText: '确定',
          center: true,
          callback: async action => {
            if (action === 'confirm') {
              const res = await this.$apiUtil.postByForm('pushOrder/deletePushOrder', {
                pushOrderId: row.pushOrderId
              })
              // console.log(res)
              if (res.code !== '200') {
                return this.$message.error(res.msg)
              }
              this.$message.success('删除入库单成功')
              this.getPushOrderList()
            }
          }
        })
      },
      async editPushOrder() {
        const res = await this.$apiUtil.postByJson('pushOrder/editPushOrder', this.editPushOrderForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.$message.success('编辑入库单成功！')
        this.editPushOrderDialog = false
        this.getPushOrderList()
      },
      async openDraw(row) {
        console.log(row)
        this.detailsData = row
        this.getPushOrderDetailList()
        this.tableDraw = true
        // 显示详情二维码
        /* eslint-disable no-new */
        this.$nextTick(function() {
          document.getElementById('outQrc').innerHTML = ''
          const outQrc = new QRCode('outQrc', { // eslint-disable-line no-unused-vars
            width: 100,
            height: 100,
            text: '' + row.pushOrderCode,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          })
        })
      },
      // 物料列表
      async getPushOrderDetailList() {
        console.log(this.pushOrderList)
        let orderDetailsTemp = {}
        orderDetailsTemp = this.pushOrderList.find((item) => {
          return item.pushOrderId === this.detailsData.pushOrderId
        })
        this.pushOrderDetailList = orderDetailsTemp.pushOrderDetailVOS
      },
      // 添加物料
      async addDetails() {
        this.addPushOrderDetailsForm.pushOrderCode = this.detailsData.pushOrderCode
        const res = await this.$apiUtil.postByJson('pushOrderDetail/addPushOrderDetail', this.addPushOrderDetailsForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.$message.success('添加入库物料成功！')
        this.addPushOrderDetailsDialog = false
        // this.getPushOrderDetailList()
        this.getPushOrderList()
      },
      // 编辑物料
      async eidtDetails() {
        const res = await this.$apiUtil.postByJson('pushOrderDetail/editPushOrderDetail', this.editPushOrderDetailsForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.$message.success('编辑入库物料成功！')
        this.editPushOrderDetailsDialog = false
        // this.getPushOrderDetailList()
        this.getPushOrderList()
      },
      async pushOrderDeleteDetailsBtnClick(row) {
        this.$alert('确定删除当前物料:' + row.productName + ' ?', '提示', {
          confirmButtonText: '确定',
          center: true,
          callback: async action => {
            if (action === 'confirm') {
              const res = await this.$apiUtil.postByForm('pushOrderDetail/deletePushOrderDetail', {
                pushOrderDetailId: row.pushOrderDetailId
              })
              // console.log(res)
              if (res.code !== '200') {
                return this.$message.error(res.msg)
              }
              this.$message.success('删除成功！')
              // this.getPushOrderDetailList()
              this.getPushOrderList()
            }
          }
        })
      },
      selectGet(vId) {
        let sobj = {}
        sobj = this.productList.find((item) => {
          return item.productCode === vId
        })
        this.addPushOrderDetailsForm.productCode = sobj.productCode
        this.addPushOrderDetailsForm.productName = sobj.productName
      },
      addPushOrderDialogClosed() {
        this.$refs.addPushOrderFormRef.resetFields()
      },
      editPushOrderDialogClosed() {
        this.$refs.editPushOrderFormRef.resetFields()
      },
      printqrCode() {},
      changeStatus(val) {
        this.editPushOrderForm.pushOrderCreatime = val
      }
    },
    created() {
      this.getPushOrderList()
      this.getProductList()
    }
  }
</script>

<style lang="less">
  .el-drawer__body {
    padding: 20px;
  }

  .el-drawer__header {
    font-size: 0.4rem;
    margin-bottom: 20px;
  }

  .el-select {
    width: 100%;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    div {
      span {
        font-weight: bold;
      }
    }
  }

  .qrcode {
    display: inline-block;

    img {
      width: 150px;
      height: 150px;
      box-sizing: border-box;
    }
  }

  .text {
    padding: 5px 0;
    font-size: 20px;
  }

  .el-form-item__content {
    >div {
      width: 100% !important;
    }
  }

  :focus {

    outline: 0;
  }
</style>
